<!-- 添加专题 -->
<template>
  <div>
    <el-dialog
      :visible.sync="dailogshowadd"
      :before-close="handleClose"
      width="50%"
    >
        <span slot="title"> 添加专题</span>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item prop="logo" label="专题图片:">
            <div v-if="form.logo===''">
        <el-upload
          :file-list="file_list"
          :before-upload="beforelogoUpload"
          :on-change="changeFile"
          action="action"
          :http-request="uploadFile"
          ref="editEnc"
          :class="file_list.length === 0 ? 'styleA' :'styleB'"
          list-type="picture-card"
        >
          <i
            slot="default"
            class="el-icon-plus"
          ></i>
          <div
            slot="file"
            slot-scope="{file}"
          >
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        </div>
        <div v-else>
            <el-image
              style=" border: 1px dashed #99A9BF; width: 100px; height: 100px;"
              @click="handleRemovelogo(form.logo)"
              :src="form.logo"
            ></el-image>
        </div>
        </el-form-item>
        <el-form-item prop="name" label="专题名称:">
            <el-input v-model="form.name" placeholder="请输入专题名称"></el-input>
        </el-form-item>
        <el-form-item porp="description" label="专题说明:">
            <el-input v-model="form.description" height="80px"
            type="textarea"
            maxlength="100"
            resize="none" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleAddRecommend">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { h } from 'vue';

export default {
  name: "AddRecommend",
  props: {
    visible: {
        type: Boolean,
        default: false
    }
  },
  watch: {

    visible: {
        handler(val){
            this.dailogshowadd = val
        },
        immediate: true,
        deep: true
    }
  },
  data() {
    return {
        dailogshowadd: false,
        form: {
            logo: "",
            name: "",
            description: ""
        },
        file_list: []
    }
  },
  methods: {
       // 上传图片
       async uploadFile(file) {
      const formData = new FormData();
      console.log(file.file);
      formData.append("files", file.file);
      console.log(formData);
      const res = await uploadImg(formData);
      console.log(res);
      if (res.status === 200) {
        this.form.logo = res.data.result[0];
      } else {
        this.$message.error("上传失败");
      }
    },

    changeFile(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.file_list = fileList;
      console.log(this.file_list.length);
    },
    //删除上传图片
    handleRemove(file) {
      this.$refs.editEnc.abort(file);
      this.file_list.splice(this.file_list.indexOf(file), 1);
    },
    //删除已经上传的图片
    handleRemovelogo() {
        this.form.logo = "";
        this.file_list = [];
    },
    submitForm() {
      console.log(this.form);
    },
    beforelogoUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG || (isPNG && isLt2M);
    },
    handleClose(){
        this.dailogshowadd = false;
        this.$emit("close", false);
    }
  }
};
</script>

<style>
.styleA .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.styleB .el-upload--picture-card {
  display: none;
}
</style>